<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-input
					placeholder="请输入姓名"
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 前置图标 -->
			<pj-demo title="前置图标">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 后置图标 -->
			<pj-demo title="后置图标">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					afterIconName="__arrow-right"
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 可清空 -->
			<pj-demo title="可清空">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					afterIconName="__arrow-right"
					clearable
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 禁用 -->
			<pj-demo title="禁用">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					disabled
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 只读 -->
			<pj-demo title="只读">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					readonly
					class="input"
				></pure-input>
			</pj-demo>

			<!-- 聚焦效果 -->
			<pj-demo title="聚焦效果">
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					focusType="border-all"
					class="input"
				></pure-input>
				<pure-gap></pure-gap>
				<pure-input
					placeholder="请输入姓名"
					v-model="name"
					beforeIconName="__home"
					focusType="border-bottom"
					class="input"
					style="border-radius: 0"
				></pure-input>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const name = ref("陈老师儿~");
</script>

<style lang="scss" scoped>
	.input {
		background: var(--pure-background-default);
		padding: 0 12px;
		border-radius: var(--pure-radius-default);
	}
</style>
